<template>
    <div>
        <vp-dialog :span="2" ref="editDialogRef">
            <template #title><vp-label zh="修改清单关联" en="Modify Incident List Association"/></template>
            <el-form label-suffix=":" v-loading="loading" :model="formData" ref="formRef" label-width="120px">
                <el-row>
                    <vp-col :span="4">
                        <el-form-item prop="bh">
                            <template #label><vp-label zh="报告编号" en="Report No."/></template>
                            <span>{{formData.bh}}</span>
                        </el-form-item>
                    </vp-col>
                    <vp-col :span="4">
                        <el-form-item prop="bgrq">
                            <template #label><vp-label zh="报告日期" en="Report Date"/></template>
                            <span>{{formData.bgrq}}</span>
                        </el-form-item>
                    </vp-col>
                    <vp-col :span="4">
                        <el-form-item prop="jdid">
                            <template #label><vp-label zh="基地" en="Base"/></template>
                            <span>{{formData.jdmc}}</span>
                        </el-form-item>
                    </vp-col>
                    <vp-col :span="4">
                        <el-form-item prop="bgr">
                            <template #label><vp-label zh="报告人" en="Reporter"/></template>
                            <span>{{formData.bgrmc }}</span>
                        </el-form-item>
                    </vp-col>
                </el-row>
                <el-row>
                    <vp-col :span="4">
                        <el-form-item prop="sfrq">
                            <template #label><vp-label zh="事发日期" en="Incident Date"/></template>
                            <span>{{formData.sfrq}}</span>
                        </el-form-item>
                    </vp-col>
                    <vp-col :span="4">
                        <el-form-item prop="fjid">
                            <template #label><vp-label zh="机号" en="A/C REG"/></template>
                            <span>{{formData.fjzch}}</span>
                        </el-form-item>
                    </vp-col>
                    <vp-col :span="4">
                        <el-form-item prop="fjjx">
                            <template #label><vp-label zh="机型" en="A/C Type"/></template>
                            <span>{{formData.fjjx}}</span>
                        </el-form-item>
                    </vp-col>
                </el-row>
                <el-row>
                    <vp-col :span="1">
                        <el-form-item prop="sjms">
                            <template #label><vp-label zh="事件描述" en="Incident Desc."/></template>
                            <span >{{formData.sjms}}</span>
                        </el-form-item>
                    </vp-col>
                </el-row>
                <el-row>
                    <vp-col :span="1">
                        <el-form-item prop="bzcsjqdid">
                            <template #label><vp-label zh="修改清单关联" en="Modify Association"/></template>
                            <el-space>
                                <el-link type="info" v-if="formData.bzcsjqdid" @click="handleView(formData.bzcsjqdid)">
                                    <span>{{ formData.bzcsjqdbh + ": "  + (formData.bzcsjqdsjjg || '')}}</span>
                                </el-link>
                                <el-button type="primary" @click="handleChooseAssociation" plain round size="small">
                                    <el-icon class="mr4"><ele-Search/></el-icon> <span>选择 Choose</span>
                                </el-button>
                                <el-button type="danger" v-if="formData.bzcsjqdid" @click="handleCancelAssociation" plain round size="small">
                                    <el-icon class="mr4"><ele-Close/></el-icon> <span>取消当前关联 Cancel Association</span>
                                </el-button>
                            </el-space>
                        </el-form-item>
                    </vp-col>
                </el-row>
            </el-form>
            <template #footer>
                <vp-btn-confirm @click="handleSave" />
            </template>
        </vp-dialog>
        <ChooseAssociatedList ref="chooseAssociatedRef" @confirm="handleAssociationConfirm"></ChooseAssociatedList>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, nextTick, reactive, ref, toRefs } from 'vue';
import request from '/@/utils/request';
import { verifyNumberIntegerAndFloat3 } from '/@/utils/toolsValidate';
import { useRouter } from 'vue-router';
import { i18n } from '/@/i18n';
import ChooseAssociatedList from './ChooseAssociatedList.vue';

export default defineComponent({
    name:'editMaintenanceAssociatedList',
    components: { ChooseAssociatedList },
    emits: ['formSubmited'],
    setup(props, context) {
        const state = reactive({
            loading: false,
            saveLoading: false,
            formData: {
                id: "",
                zt: 10,
                bh: "",
                bgrq: "",
                bgrid: "",
                bgrmc: "",
                bgbmid: "",
                bgbmmc: "",
                jdid: "",
                jdmc: "",
                fjid: "",
                fjzch: "",
                fjjx: "",
                sfrq: "",
                sfdlx: null,
                sfdid: "",
                sfdd: '',
                sjms: '',
                clqk: "",
                xyghhcbs: null,
                xyhcxlbs: null,
                xytcbs: null,
                yjtcsj: "",
                attachments: [],
            },
            lx: 1,
		});

        const editDialogRef = ref();
        const router = useRouter();
        const formRef = ref();
        const chooseAssociatedRef = ref();

        const handleOpen = (id: string, lx: number)=>{
            editDialogRef.value.handleOpen();
            state.lx = lx;
            nextTick(() => {
                state.loading = true;
                if(lx == 1){
                    request.get(`/abnormal/maintenance/${id}`).then((res)=>{
                        state.formData = {
                            ...res.data,
                        }
                        state.loading = false;
                    })
                }else{
                    request.get(`/abnormal/maintenance/supplement/${id}`).then((res)=>{
                        state.formData = {
                            ...res.data.maintenance,
                            id: res.data.id,
                            bzcsjqdid: res.data.bzcsjqdid,
                            bzcsjqdbh: res.data.bzcsjqdbh,
                            bzcsjqdsjjg: res.data.bzcsjqdsjjg,
                        }
                        state.loading = false;
                    })
                }
			});
        }

        const handleSave = ()=>{
            if(state.loading){
                return;
            }
            state.saveLoading = true;
            formRef.value.validate((valid: boolean) => {
                if (valid) {
                    let url = state.lx == 1 ? "/abnormal/maintenance/editAssociation" : "/abnormal/maintenance/supplement/editAssociation";
                    request.post(url, {
                        id: state.formData.id,
                        bzcsjqdid: state.formData.bzcsjqdid,
                    }).then(() => {
                        context.emit("formSubmited");
                        editDialogRef.value.handleClose();
                    }).finally(()=>{
                        state.saveLoading = false;
                    })
                } else {
                    state.saveLoading = false;
                }
            })
        }

        const handleView = (id: string)=>{
			router.push({
				name: "viewAbnormalList",
				params: {
					id: id,
				},
			})
		}

        /**
         * 任务性质描述
         */
         const taskNature = computed(() => {
            if (!state.formData.rwxz) {
                return '';
            }
            return (state.formData.rwxzdl === 1 ? i18n.global.t('nature.isProd') : i18n.global.t('nature.NonProd')) 
                + ' / ' +state.formData.rwxz;
        })

        const handleChooseAssociation = () => {
            chooseAssociatedRef.value.handleOpen({
                selectedId: state.formData.bzcsjqdid,
            });
        }

        const handleAssociationConfirm = (data: any) => {
            state.formData.bzcsjqdid = data.id || '';
            state.formData.bzcsjqdbh = data.bh || '';
            state.formData.bzcsjqdsjjg = data.sjjg || '';
		}

        const handleCancelAssociation = () => {
            state.formData.bzcsjqdid = '';
            state.formData.bzcsjqdbh = '';
            state.formData.bzcsjqdsjjg = '';
        }

        return {
            ...toRefs(state),
            handleSave,
            handleOpen,
            editDialogRef,
            verifyNumberIntegerAndFloat3,
            handleView,
            formRef,
            taskNature,
            chooseAssociatedRef,
            handleChooseAssociation,
            handleAssociationConfirm,
            handleCancelAssociation,
        }
    },
})
</script>